<template>
  <div class="block_main blue-tit">
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">用户列表</div>
          <!-- 筛选 -->
          <el-form
            style="padding:20px 20px 0"
            :inline="true"
            :model="region"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="用户名称">
              <el-input v-model="filterName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="Filter" type="primary">查询</el-button>
              <el-button type="success" @click="addUser">新建用户</el-button>
            </el-form-item>
            <!-- <span style="float:right;line-height:40px;">累计{{pagetotal}}项</span> -->
          </el-form>
          <!-- 筛选结束 -->
          <!-- 表格内容组件 -->
          <el-table :data="tableData5" style="width: 100%">
            <el-table-column label="用户 ID" width="80" prop="id"></el-table-column>
            <el-table-column label="用户名称" prop="name"></el-table-column>
            <el-table-column label="密码" prop="user"></el-table-column>
            <el-table-column label="姓名" prop="user"></el-table-column>
            <el-table-column label="手机号" prop="user"></el-table-column>
            <el-table-column label="创建时间" prop="user"></el-table-column>
            <el-table-column label="权限" prop="user"></el-table-column>
            <el-table-column label="状态" prop="user"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" @click="delList(scope.row)" size="mini">删除</el-button>
                <el-button type="text" size="mini" @click="editFn(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 翻页 -->
          <div class="zpage">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size.sync="pagesize"
              layout="total, prev, pager, next, jumper"
              :total.sync="pagetotal"
            ></el-pagination>
          </div>
          <!-- 翻页 end -->
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <span>{{scontent}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";

export default {
  data() {
    return {
      region: {},
      filterName: "",
      tableData5: [],
      currentPage: 1,
      pagesize: 10,
      pagetotal: 10000,
      scontent: "",
      title: "信息",
      dialogVisible: false,
      thisID: ""
    };
  },
  methods: {
    Filter() {
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.getList();
    },
    handleSizeChange(val) {},
    getList() {
      var _this = this;
      actionurl.getUserList(
        {
          name: _this.filterName,
          pageOn: _this.currentPage,
          pageNum: 10
        },
        function(re) {
          if ((re.status = 1)) {
            _this.tableData5 = re.data;
            _this.pagetotal = re.count;
          } else {
          }
        }
      );
    },
    addUser() {
      this.$router.push({ path: "/systemUserAdd/0" });
    },
    delList(row) {
      this.dialogVisible = true;
      this.scontent = "确定删除吗？";
      this.thisID = row.id;
    },
    confirm() {
      var _this = this;
      actionurl.delAttendant(
        {
          id: _this.thisID
        },
        function(re) {
          _this.$message(re.msg);
          _this.dialogVisible = false;
          if ((re.status = 1)) {
            _this.getList();
          } else {
          }
        }
      );
    },
    editFn(row) {
      this.$router.push({ path: "/systemUserAdd/" + row.id });
    }
  },
  created() {
    this.getList();
  }
};
</script>
